<template>
    <div class="menu">
        <el-menu
                :default-active="active"
                background-color="#2a3542"
                text-color="#fff"
                :router="true"
                :unique-opened="true"
                active-text-color="#1e83f0">
            <el-menu-item index="/main">
                <i class="fa fa-home" style="width: 13px;height: 14px;color: #fff"></i>
                <span slot="title" style="padding-left: 5px">
                    系统首页
                </span>
            </el-menu-item>
            <div v-for="(router,index) in routers"
                 v-if="router.children && router.children.length" :key="index">
                <el-submenu :index="'index_'+index" v-if="router.children.length>1">
                    <template slot="title">
                        <i :class="router.meta.icon" style="width: 13px;height: 14px;color: #fff"></i>
                        <span style="padding-left: 5px">&nbsp;{{router.meta.title}}</span>
                    </template>
                    <el-menu-item-group v-if="router.children.length>1">
                        <el-menu-item v-for="(child,i) in router.children" v-if="child.meta.show" :index="child.path" :key="i+1">
                            &nbsp;{{child.meta.title}}
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item v-else :index="router.path">
                    <i :class="router.meta.icon" style="width: 13px;height: 14px"></i>
                    <span slot="title" style="padding-left: 5px">&nbsp;{{router.meta.title}}</span>
                </el-menu-item>
            </div>
        </el-menu>
    </div>

</template>

<script>
    import {mapGetters} from 'vuex';
    export default {
        computed: {
            ...mapGetters(['active','routers']),
        },
        created() {

        },
    }
</script>
<style>
.el-menu-item.is-active {
    background-color: rgb(22, 31, 31) !important;
}
.el-menu-item-group__title {
    padding: 0;
}
</style>
